<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb-8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['equipment:firmware:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >固件升级</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="firmwareList">
      <el-table-column
        label="固件版本号"
        align="center"
        prop="firmwareVersion"
        min-width="220"
      />
      <el-table-column
        label="系统固件号"
        align="center"
        prop="internalVersion"
        width="100"
      />
      <el-table-column
        label="固件类型"
        align="center"
        width="80"
        prop="firmwareType"
      />
      <el-table-column label="升级方式" align="center" width="80">
        <template slot-scope="{ row }">
          <div>{{ row.upgradeType == 0 ? "全量" : "指定设备升级" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="强制升级" align="center" width="80">
        <template slot-scope="{ row }">
          <div>{{ row.isForce == 1 ? "强制" : "不强制" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="覆盖数量"
        align="center"
        prop="deviceNum"
        width="80"
      >
        <template slot-scope="{ row }">
          <div style="color: #67c23a">{{ row.deviceNum || 0 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="升级成功设备数"
        align="center"
        prop="succDeviceNum"
        width="130"
      >
        <template slot-scope="{ row }">
          <div style="color: #409EFF">{{ row.succDeviceNum || 0 }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="升级说明"
        align="center"
        prop="versionExplain"
        :min-width="250"
      >
      </el-table-column>
      <el-table-column
        label="发布时间"
        align="center"
        prop="pushTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.pushTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布人"
        align="center"
        prop="adminName"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="150px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['equipment:firmware:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-link
            v-hasPermi="['equipment:firmware:download']"
            class="ml-10 fz-12"
            icon="el-icon-download"
            :underline="false"
            type="primary"
            :href="scope.row.packageUrl"
            target="_blank"
            >下载固件</el-link
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备管理对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :show-message="false"
        label-width="120px"
      >
        <el-form-item
          label="内部固件版本"
          prop="internalVersion"
          required
        >
          <el-input
            v-model="form.internalVersion"
            placeholder="请输入固件版本"
          />
        </el-form-item>
        <el-form-item
          label="设备固件版本"
          prop="firmwareVersion"
          required
        >
          <el-input
            v-model="form.firmwareVersion"
            placeholder="请输入设备实际的固件版本号"
          />
        </el-form-item>
        <el-form-item label="固件类型" prop="firmwareType" required>
          <el-radio-group v-model="form.firmwareType">
            <el-radio label="JDM">加德满</el-radio>
            <el-radio label="GZ">高展</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="升级方式" prop="upgradeType" required>
          <el-radio-group v-model="form.upgradeType">
            <el-radio :label="0">全量升级</el-radio>
            <el-radio :label="1">指定设备升级</el-radio>
          </el-radio-group>
          <el-input
            v-if="form.upgradeType === 1"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="手动输入要升级的设备序列号,用逗号隔开"
            v-model="form.upgradeEquipments"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="OTA升级包" prop="packageUrl" required>
          <file-upload
            v-model="form.packageUrl"
            :limit="1"
            :fileSize="2048"
            :fileType="['zip', 'rar']"
            btnText="点击上传OTA升级包"
          />
        </el-form-item>
        <el-form-item
          label="升级说明"
          prop="versionExplain"
          required
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 3 }"
            placeholder="请输入升级说明,用于用户升级弹框提示文案说明"
            v-model="form.versionExplain"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="是否强制升级" prop="isForce" required>
          <el-radio-group v-model="form.isForce">
            <el-radio :label="0">不强制</el-radio>
            <el-radio :label="1">强制升级</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
import {
  getFirmwareList,
  addFirmware,
  updateFirmware,
  deleteFirmware,
} from "@/api/equipment/firmware";
export default {
  name: "Firmware",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 固件升级列表
      firmwareList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  activated() {
    this.getList();
  },
  methods: {
    /** 查询固件升级 */
    getList() {
      this.loading = true;
      getFirmwareList(this.queryParams).then((response) => {
        this.firmwareList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        internalVersion: "", // 内部固件版本
        firmwareVersion: "", // 设备固件版本
        firmwareType: "", // 固件类型 :  JDM 、GZ
        upgradeType: 0, // 升级类型: 0全量 1指定设备升级
        upgradeEquipments: "", // 升级设备序列号串，逗号分开
        packageUrl: "", // 升级包：地址
        versionExplain: "", // 升级说明
        isForce: 0, // 是否强制: 0不强制 1强制
      };

    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.$refs.form && this.$refs.form.clearValidate()
      this.title = "发布新固件";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.open = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.title = "编辑固件";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            // 编辑
            updateFirmware(this.form).then(res=>{
              this.$message.success('编辑成功')
              this.cancel()
              this.getList()
            })
          } else {
            // 新增
            addFirmware(this.form).then((res) => {
              this.$message.success('新增成功')
              this.cancel()
              this.getList()
            });
          }
        }
      });
    },
  },
};
</script>
